<template>
  <view class="fixed z-50 w-full bg-white rounded-t-[16px] s transition-all duration-300">
    <view class="grid grid-cols-3 p-2">
      <view
        class="active:scale-95 flex flex-col col-span-1 gap-1 justify-center items-center transition-transform duration-200"
        @click="vk.navigateTo('/pages/index/index')"
      >
        <view class="size-[24px]">
          <image
            :src="tabbarIndex == 1 ? '/static/tabbar2.png' : '/static/tabbar1.png'"
            class="size-full transition-all duration-300"
            mode="scaleToFill"
          />
        </view>
        <view class="text-[9px] transition-all duration-300" :class="tabbarIndex == 1 ? 'text-[#00050D] font-bold' : 'text-[#797C81]'"> 首页 </view>
      </view>

      <view class="flex relative col-span-1 justify-center" @click="show = true">
        <view class="size-[64px] absolute left-1/2 -translate-x-1/2 -top-7 active:scale-95 transition-transform duration-300">
          <image src="/static/tabbar5.png" class="size-full" mode="scaleToFill" />
        </view>
      </view>

      <view
        class="active:scale-95 flex flex-col col-span-1 gap-1 justify-center items-center transition-transform duration-200"
        @click="vk.navigateTo('/pages/my/index')"
      >
        <view class="size-[24px]">
          <image
            :src="tabbarIndex == 2 ? '/static/tabbar4.png' : '/static/tabbar3.png'"
            class="size-full transition-all duration-300"
            mode="scaleToFill"
          />
        </view>
        <view class="text-[9px] transition-all duration-300" :class="tabbarIndex == 2 ? 'text-[#00050D] font-bold' : 'text-[#797C81]'"> 我的 </view>
      </view>
    </view>
    <view class="py-1"></view>
    <!-- 弹框 -->
    <!-- 弹框 -->
    <u-popup v-model="show" mode="bottom" border-radius="16" class="">
      <view class="bg-center bg-no-repeat bg-cover" style="background-image: url('/static/img.publish@3X.png">
        <view class="p-[20px] flex flex-col gap-5 pt-[40px]">
          <view class="flex flex-col">
            <view class="font-bold text-[40px] text-[#161A24]"> 发布 </view>
            <view class="text-[18px] text-[#161A24]">晒钓点，解锁钓鱼新乐趣。 </view>
          </view>
          <view class="bg-[#FFFFFF] shadow-[0px_2px_16px_0px_rgba(55,114,110,0.06)] rounded-[16px] p-[18px] flex justify-between" @click="jump(1)">
            <view class="flex gap-3 items-center">
              <view class="size-[50px] overflow-hidden">
                <image src="/static/icon_sandpoleRelease@3X.png" mode="scaleToFill" class="size-full" />
              </view>
              <view class="flex flex-col">
                <view class="text-[18px] text-[#2D3038] font-bold"> 手杆标点 </view>
                <view class="text-[12px] text-[#5C6068]"> 精准垂钓，分享每一竿的惊喜收获。 </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#00050D" class="font-bold"></u-icon>
          </view>
          <view class="bg-[#FFFFFF] shadow-[0px_2px_16px_0px_rgba(55,114,110,0.06)] rounded-[16px] p-[18px] flex justify-between" @click="jump(2)">
            <view class="flex gap-3 items-center">
              <view class="size-[50px] overflow-hidden">
                <image src="/static/icon_luyaRelease@3X.png" mode="scaleToFill" class="size-full" />
              </view>
              <view class="flex flex-col">
                <view class="text-[18px] text-[#2D3038] font-bold"> 路亚标点 </view>
                <view class="text-[12px] text-[#5C6068]"> 精准定位，探索水域深处的新世界。 </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#00050D" class="font-bold"></u-icon>
          </view>

          <view class="flex justify-center mt-[40px]">
            <view class="w-[54px] h-[54px] bg-[#F0F1F3] rounded-[16px] flex justify-center items-center" @click="show = false">
              <u-icon name="close" color="#00050D" class="font-bold"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [
          {
            name: '首页',
            icon: '/static/tabbar2.png',
            icon2: '/static/tabbar1.png'
          },
          {
            name: '我的',
            icon: '/static/tabbar4.png',
            icon2: '/static/tabbar3.png'
          }
        ]
      }
    },
    props: {
      tabbarIndex: {
        type: Number
      }
    },
    created() {
      console.log('333==> ', 333)
    },
    methods: {
      jump(e) {
        this.show = false
        if (e == 1) {
          vk.navigateTo('/pages/index/release')
        }
        if (e == 2) {
          vk.navigateTo('/pages/index/lure')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .s {
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
    bottom: 0px;
  }
</style>
